<template>
  <div>
    <!-- 新功能 -->
    <!-- <van-popup v-model="show">内容</van-popup> -->

    <!-- 顶部 -->
    <div class="top">
      {{ time }}
      <div style="margin-left: 50px;">机器人菲菲</div>
      <div class="top-a">
        <el-button class="denglu" type="text" @click="open" v-if="userImg == ''">登录</el-button>
        <el-button class="denglu" type="text" @click="exit" v-if="userImg != ''">退出登录</el-button>
        <el-button type="text" @click="clear" :plain="true">清空记录</el-button>
      </div>
    </div>
    <!-- 聊天内容 -->
    <div class="chat">
      <div :class="{ 'chat-div1': (index % 2 != 0), 'chat-div2': (index % 2 == 0) }" v-for="(item, index) in chat"
        :key="index">
        <div class="icon1" v-if="index % 2 == 0"><img v-if="userImg != ''" class="userImg" :src="userImg" alt=""> </div>
        <div class="icon2" v-if="index % 2 != 0">菲菲</div>
        <div class="text" v-if="index % 2 == 0">{{ item }}</div>
        <div class="text2" v-if="index % 2 != 0">{{ item }}</div>
      </div>
    </div>
    <!-- 输入框 -->
    <div class="input">
      <el-input v-model="content" placeholder="请输入内容"></el-input>
      <div @click="open">
        <el-button type="primary" @click="send" v-if="chat.length % 2 == 0">发送</el-button>
        <el-button type="primary" disabled v-if="chat.length % 2 != 0">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import axios from 'axios'
export default {
  name: 'robotChat',
  data() {
    return {
      content: "",
      chat: [],
      userQQ: '',
      userImg: "",
      time: "",
      show: false,
    }
  },
  methods: {
    // 发送
    send() {
      if (this.content == '' || this.content == ' ' || this.content == '  ' || this.content == '  ') {
        return
      }
      // 新功能
      // if (this.content == '美女') {
      //   this.show = true
      //   axios.get('https://xiaobapi.top/api/xb/api/beauty_video.php').then((res) => {
      //     console.log(res);
      //   })
      // }
      if (this.userImg != '') {
        // 将我的聊天记录存储在chat里
        this.chat.push(this.content)
        axios.get("https://api.a20safe.com/api.php?api=36&key=e5f907b4ba1f08c8503433a5da97f0c9&text=" + this.content).then((res) => {
          if (res.data == '') {
            console.log(res);
            this.chat.pop()
            localStorage.setItem('chat', this.chat)
            location.reload()
            this.$message({
              showClose: true,
              type: 'error',
              message: '消息发送失败!',
              center: true
              // 帮我写一篇关于人工智能的论文
            });
          } else if (res.data.code == 110) {
            this.$message({
              type: 'error',
              showClose: true,
              message: res.data.msg,
              center: true
            });
          } else {
            // 将机器人的聊天记录存储在chat里
            console.log(res);
            this.chat.push(res.data.data[0].reply)
            // console.log(this.chat);
            // 机器人回复内容
            // console.log(res.data.data[0].reply);
            localStorage.setItem('chat', this.chat)
          }
        })
        this.content = ''
      }
    },
    // 清除聊天记录
    async clear() {
      // Dialog.confirm({
      //   title: '确认是否删除，删除后不可恢复!',
      // })
      //   .then(() => {
      //     // console.log();
      //   })
      //   .catch(() => {
      //     this.$message({
      //       showClose: true,
      //       message: '消息未删除',
      //       type: 'error'
      //     });
      //   });
      if (this.userImg == '') {
        await this.$prompt('请输入QQ号', 'QQ号输入错误为游客模式', {
          confirmButtonText: '确定'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '登录成功'
          })
          this.userQQ = value
        })
        axios.get("https://api.a20safe.com/api.php?api=22&key=e5f907b4ba1f08c8503433a5da97f0c9&qq=" + this.userQQ).then((res) => {
          console.log(res);
          // console.log(res.data.data[0].picurl);
          this.userImg = res.data.data[0].picurl
        })
      }
      localStorage.setItem('userImg', this.userImg)

      Dialog.confirm({
        title: '确认是否删除，删除后不可恢复!',
      })
        .then(() => {
          this.chat = []
          localStorage.removeItem('chat')
          this.$message({
            showClose: true,
            message: '消息删除成功',
            type: 'success'
          });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            message: '消息未删除',
          });
        });
    },
    // 登录
    async open() {
      if (this.userImg == '') {
        await this.$prompt('请输入QQ号', 'QQ号输入错误为游客模式', {
          confirmButtonText: '确定'
        }).then(({ value }) => {
          this.$message({
            showClose: true,
            type: 'success',
            message: '登录成功'
          })
          this.userQQ = value
        })
        await axios.get("https://api.a20safe.com/api.php?api=22&key=e5f907b4ba1f08c8503433a5da97f0c9&qq=" + this.userQQ).then((res) => {
          console.log(res);
          // console.log(res.data.data[0].picurl);
          this.userImg = res.data.data[0].picurl
        })
        localStorage.setItem('userImg', this.userImg)
      }
    },
    // 退出登录
    exit() {
      Dialog.confirm({
        title: '是否退出登录!',
      })
        .then(() => {
          this.$message({
            showClose: true,
            type: 'success',
            message: '退出成功!'
          })
          this.userQQ = ''
          this.userImg = ''
          localStorage.setItem('userImg', this.userImg)
        })
        .catch(() => {
          return
        });
    },
  },
  mounted() {
    if (localStorage.getItem('userImg') != null) {
      this.userImg = localStorage.getItem('userImg')
    }
    if (localStorage.getItem('chat') != null) {
      this.chat = localStorage.getItem('chat').split(",")
    }
    // 获取北京时间
    axios.get("https://api.a20safe.com/api.php?api=2&key=e5f907b4ba1f08c8503433a5da97f0c9").then((res) => {
      // console.log(res.data.data[0].time.split("").slice(11,16).join(""));
      this.time = res.data.data[0].time.split("").slice(11, 16).join("")
    })
    // 更新北京时间
    setInterval(() => {
      axios.get("https://api.a20safe.com/api.php?api=2&key=e5f907b4ba1f08c8503433a5da97f0c9").then((res) => {
        // console.log(res.data.data[0].time.split("").slice(11,16).join(""));
        this.time = res.data.data[0].time.split("").slice(11, 16).join("")
      })
    }, 2000);
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}

.top {
  position: fixed;
  display: flex;
  width: 100%;
  height: 50px;
  background-color: #fff;
  padding-left: 20px;
  z-index: 100;
  border-bottom: 1px solid #ddd;
  align-items: center;
}

.input {
  position: fixed;
  display: flex;
  width: 100%;
  bottom: 0;
}

.chat {
  position: absolute;
  bottom: 45px;
  width: 100%;
  overflow-y: scroll;
  height: 85vh;
}

// 用户文字背景色
.text {
  padding: 10px;
  background-color: rgb(87, 223, 232);
  border-radius: 12px;
  display: inline-block;
  line-height: 20px;
  margin-right: 50px;
  margin-left: 50px;
}

// 机器人文字背景色
.text2 {
  padding: 10px;
  background-color: rgb(247, 178, 230);
  border-radius: 12px;
  display: inline-block;
  line-height: 20px;
  margin-left: 45px;
  margin-right: 50px;
}

.chat-div1 {
  float: left;
  display: flex;
  margin: 5px 0 5px 5px;
  clear: both;
}

.chat-div2 {
  float: right;
  display: flex;
  margin: 5px 0 5px 5px;
  clear: both;
}

// 用户头像
.icon1 {
  position: absolute;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background-color: rgb(87, 223, 232);
  padding: 0;
  line-height: 40px;
  margin: 0 5px;
  text-align: center;
  color: #fff;
}

// 机器人头像
.icon2 {
  position: absolute;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background-color: rgb(247, 178, 230);
  padding: 0;
  line-height: 40px;
  margin: 0 5px;
  text-align: center;
  color: #fff;
}

.userImg {
  width: 100%;
  height: 100%;
  border-radius: 50px;
}

.top-a {
  position: absolute;
  right: 35px;
  display: flex;
}

.el-message-box {
  width: 80%;
}
</style>